<template>
  <van-tabs v-model="active" @change="change">
    <van-tab
      v-for="(i, index) in items"
      :key="index"
      :title="index === 'sales' ? '畅销' : index === 'new' ? '新书' : '精选'"
    >
      <div class="list">
        <div
          @click="Godetail(item.id)"
          class="list-item"
          v-for="item in i.list"
          :key="item.id * Date.now() * Math.random()"
        >
          <img :src="item.cover_url" :alt="item.description" />
          <div class="info">
            <p class="name">{{ item.title }}</p>
            <div class="listaction">
              <p class="price">{{ item.price | money }}</p>
              <div class="love">
                <van-icon name="like" color="red" size="20" />
                <span>{{ item.collects_count }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script>
export default {
  props: {
    items: {
      type: Object,
      require: true
    }
  },
  filters: {
    money (val, nation = '￥') {
      return nation + val
    }
  },
  data () {
    return {
      active: ''
    }
  },
  methods: {
    change () {
      this.$emit('data', this.active)
    },
    Godetail (id) {
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  .list-item {
    padding: 8px;
    width: 45%;
    img {
      width: 100%;
    }
    .info {
      .name {
        margin: 5px 0;
        text-align: center;
        font-size: 14px;
      }
      .listaction {
        display: flex;
        justify-content: space-around;
        .price {
          font-size: 14px;
          color: red;
        }
        .love {
          display: flex;
        }
      }
    }
  }
}
.van-tabs {
  margin-top: 20px;
  // /deep/ .van-tabs__wrap {
  //   position: sticky;
  //   top: 54px;
  //   left: 0;
  //   z-index: 10;
  // }
}
</style>
